<template>
  <el-dialog
    v-dialogDrag
    title="角色信息"
    :close-on-click-modal="false"
    :visible="isVisible"
    @close="handleClose"
    @closed="handleClosed"
  >
    <el-form
      ref="formRef"
      :model="innerModel"
      :rules="rules"
      label-width="80px"
    >
      <div
        v-loading="isLoading"
      >
        <el-form-item
          label="角色名"
          prop="name"
        >
          <el-input
            v-model="innerModel.name"
            placeholder="请输入名称"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="代码"
          prop="code"
        >
          <el-input
            v-model="innerModel.code"
            placeholder="请输入代码"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="innerModel.remark"
            placeholder="请输入备注"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-radio-group
            v-model="innerModel.status"
          >
            <el-radio
              :label="0"
            >
              停用
            </el-radio>
            <el-radio
              :label="1"
            >
              启用
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <div
      slot="footer"
    >
      <el-button
        @click="handleClose"
      >
        取 消
      </el-button>
      <el-button
        type="primary"
        :loading="isLoading"
        @click="handleSubmit"
      >
        提 交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * @typedef {{
 *   'code': String,
 *   'name': String,
 *   'remark': String,
 *   'status': 0 | 1,
 * }} Model
 */
/**
 * # 角色数据表单
 * 用于增加、修改或复制一个角色数据
 */
export default {
  'name': 'RoleDataForm',

  'props': {
    /**
     * 设置`角色数据表单`是否为加载状态
     * @type {Boolean}
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 设置`角色数据表单`是否为显示状态
     * @type {Boolean}
     */
    'isVisible': {
      'default': false,
      'type': Boolean,
    },
    /**
     * 从父组件传来的`用户数据表单`的数据
     *
     * 这个数据不会直接使用，而是会先复制到子组件内部中，使用副本
     * @type {Model}
     */
    'model': {
      'default' () {
        return {
          'code': '',
          'name': '',
          'remark': '',
          'status': 1,
        }
      },
      'type': Object,
    },
  },

  'data' () {
    return {
      /**
       * 内部的表单数据，真正用于展示的数据
       * @type {Model}
       */
      'innerModel': {
        'roleList': [],
      },
      /**
       * 表单验证规则
       */
      'rules': {
        'code': [
          {
            'message': '请输入代码',
            'required': true,
            'trigger': 'change',
          },
        ],
        'name': [
          {
            'message': '请输入角色名',
            'required': true,
            'trigger': 'change',
          },
        ],
        'status': [
          {
            'message': '请选择一个状态',
            'required': true,
            'trigger': 'change',
          },
        ],
      },
    }
  },

  'methods': {
    /**
     * 处理`角色数据表单`的对话框的关闭按钮和取消按钮点击事件
     */
    'handleClose' () {
      this.$emit('update:isVisible', false)
    },
    /**
     * 处理`用户数据表单`的对话框的关闭动画结束事件
     */
    'handleClosed' () {
      this.innerModel = {}
      this.$refs.formRef.resetFields()
    },
    /**
     * 处理`提交`按钮的点击事件
     */
    'handleSubmit' () {
      this.$refs.formRef.validate((isValid) => {
        if (!isValid) {
          return
        }
        this.$emit('submit', this.innerModel)
      })
    },
    /**
     * 将内部的表单数据和父组件传入的表单数据参数同步
     */
    'setInnerModel' () {
      this.innerModel = {
        ...this.model,
      }
      this.$refs.formRef.resetFields()
    },
  },
}
</script>

<style scoped lang="scss">

</style>
